import React, {useState} from 'react';
import './signUp.less';
import {Button, Card, Checkbox, Divider, Form, Input, Modal, Tooltip} from 'antd';
import {LockOutlined, QuestionCircleOutlined, UserOutlined} from '@ant-design/icons';
import {withRouter} from 'react-router';
import {Link} from 'react-router-dom';

function Agreement() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    return (
        <div className="agree">
            <Checkbox>我已阅读并同意
                <Modal title="注册协议" visible={isModalVisible}
                       onOk={() => {
                           setIsModalVisible(false);
                       }}
                       onCancel={() => {
                           setIsModalVisible(false);
                       }}
                >
                    <p>不用看了，不管怎么你都看不懂！！！</p>
                    <p>不用看了，不管怎么你都看不懂！！！</p>
                    <p>不用看了，不管怎么你都看不懂！！！</p>
                </Modal>
                <Link onClick={() => {
                    setIsModalVisible(true)
                }}>《注册协议》</Link>
            </Checkbox>
        </div>
    )
}


class Registration extends React.Component {
    // formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            confirmDirty: false,
        };
    }

    handleConfirmBlur(e) {
        const value = e.target.value;
        this.setState({confirmDirty: this.state.confirmDirty || !!value});
    }

    compareToFirstPassword(rule, value, callback) {
        if (value && value !== form.getFieldValue('password')) {
            callback('密码不一致!');
        } else {
            callback();
        }
    }

    validatePassword(rule, value, callback) {
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], {force: true});
        }
        callback();
    }

    render() {
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 8},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        // <Select style={{ width: 100 }}>
        //   <Option value="86">中国+86</Option>
        //   <Option value="1">美国+1</Option>
        //   <Option value="7">俄罗斯+7</Option>
        //   <Option value="20">埃及+20</Option>
        // </Select>

        return (
            <div>


                <div className="bg"/>
                <Card
                    id="signUpCard"
                    bordered={false}
                    style={{maxWidth: 350}}
                >
                    <Divider style={{fontSize: 30, marginTop: 1}}>注册</Divider>
                    <Form onFinish={(values) => {
                        this.onFinish(values)
                    }} className="signUpContainer">
                        <Form.Item {...formItemLayout}
                                   id="signUpForm"
                                   name="username1"
                                   label={

                                       <Tooltip title="可用作登录用户名，请勿包含身份证/银行卡等隐私信息">
                                           <QuestionCircleOutlined/> 用户名
                                       </Tooltip>
                                   }
                                   rules={[{required: true, message: '请设置用户名!', whitespace: true}]}
                        >

                            <Input prefix={<UserOutlined/>} placeholder='请设置用户名'/>

                        </Form.Item>

                        <Form.Item {...formItemLayout}

                                   label={
                                       <Tooltip
                                           title="请输入6-16位数字、字母或常用符号,字母区分大小写"><QuestionCircleOutlined/> 设置密码</Tooltip>}
                                   name="password"
                                   rules={[{
                                       required: true, message: '请设置登录密码!',
                                   }]}
                        >
                            <Input.Password prefix={<LockOutlined/>} type="password" placeholder='请设置登录密码'/>
                        </Form.Item>

                        <Form.Item {...formItemLayout}
                                   label={
                                       <Tooltip title="确认密码"><QuestionCircleOutlined/> 重输密码</Tooltip>}
                                   name="rePassword"
                                   rules={[{
                                       required: true, message: '',
                                   }]}>
                            <Input.Password prefix={<LockOutlined/>} type="password" placeholder='请再次输入登录密码'
                                            visibilityToggle={true}/>
                            <Agreement/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" block>立即注册</Button>
                        </Form.Item>

                    </Form>
                    <div className='goToLogin'>
                        已有账号？
                        <Link to='/login'>直接登录</Link>
                    </div>
                </Card>
            </div>
        );
    }
}


export default withRouter(Registration);